<template>
  <div
    class="tool-card card p-6 hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 cursor-pointer group relative overflow-hidden"
    @click="goToTool"
  >
    <!-- 装饰性背景 -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    
    <!-- 标签区域 -->
    <div v-if="tool.isPremium || isSponsored" class="mb-3 relative z-10 flex gap-2">
      <!-- 会员专属标签 -->
      <span v-if="tool.isPremium" class="inline-flex items-center gap-1 text-xs bg-gradient-to-r from-yellow-400 via-amber-500 to-orange-500 text-white px-3 py-1.5 rounded-full font-medium shadow-md">
        <Icon name="heroicons:star-solid" class="w-3 h-3" />
        会员专属
      </span>
      
      <!-- 推广标签 -->
      <span v-if="isSponsored" class="inline-flex items-center gap-1 text-xs bg-gradient-to-r from-orange-500 to-red-500 text-white px-3 py-1.5 rounded-full font-medium shadow-md">
        <Icon name="heroicons:fire" class="w-3 h-3" />
        推广
      </span>
    </div>

    <!-- Logo 和标题 -->
    <div class="flex items-start gap-4 mb-4 relative z-10">
      <div class="w-16 h-16 flex-shrink-0 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-xl overflow-hidden shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
        <img
          v-if="tool.logo"
          :src="getImageUrl(tool.logo)"
          :alt="tool.name"
          class="w-full h-full object-cover"
          @error="handleImageError"
        />
        <div v-else class="w-full h-full flex items-center justify-center">
          <Icon name="heroicons:cube" class="w-8 h-8 text-gray-400" />
        </div>
      </div>

      <div class="flex-1 min-w-0">
        <h3 class="font-bold text-lg mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors truncate">
          {{ tool.name }}
        </h3>
        <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
          <span v-if="tool.category" class="truncate">{{ tool.category.name }}</span>
          <span v-if="tool.isFree" class="inline-flex items-center gap-1 px-2 py-0.5 bg-gradient-to-r from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-medium">
            <Icon name="heroicons:check-circle" class="w-3 h-3" />
            免费
          </span>
        </div>
      </div>
    </div>

    <!-- 描述 -->
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2 relative z-10">
      {{ tool.description || '暂无描述' }}
    </p>

    <!-- 标签 -->
    <div v-if="tool.tags && tool.tags.length" class="flex flex-wrap gap-2 mb-4 relative z-10">
      <span
        v-for="tag in tool.tags.slice(0, 3)"
        :key="tag.id"
        class="text-xs px-2.5 py-1 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-300 rounded-full hover:from-primary-100 hover:to-purple-100 dark:hover:from-primary-900/30 dark:hover:to-purple-900/30 hover:text-primary-700 dark:hover:text-primary-300 transition-all"
      >
        {{ tag.name }}
      </span>
    </div>

    <!-- 统计信息 -->
    <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 relative z-10">
      <div class="flex items-center gap-4">
        <span class="flex items-center gap-1 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
          <Icon name="heroicons:eye" class="w-4 h-4" />
          {{ formatNumber(tool.views) }}
        </span>
        <span class="flex items-center gap-1 hover:text-red-500 transition-colors">
          <Icon name="heroicons:heart" class="w-4 h-4" />
          {{ formatNumber(tool.upvotes) }}
        </span>
      </div>
      
      <!-- 评分 -->
      <div v-if="Number(tool.rating) > 0" class="flex items-center gap-1 bg-yellow-50 dark:bg-yellow-900/20 px-2 py-1 rounded-full">
        <Icon name="heroicons:star-solid" class="w-4 h-4 text-yellow-500" />
        <span class="font-semibold text-yellow-700 dark:text-yellow-400">{{ formatRating(tool.rating) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Tool } from '~/types'

const props = defineProps<{
  tool: Tool
  isSponsored?: boolean
}>()

// 使用图片URL工具
const { getImageUrl } = useImageUrl()

// 使用Logo错误处理（自动降级到占位图）
const handleImageError = useImageError(props.tool.name)

/**
 * 跳转到工具详情页
 */
const goToTool = () => {
  // 跳转到详情页，在详情页可以查看评论、查看详细信息、访问官网
  navigateTo(`/tools/${props.tool.slug}`)
}

/**
 * 格式化数字
 */
const formatNumber = (num: number | string): string => {
  const n = Number(num)
  if (n >= 1000000) {
    return (n / 1000000).toFixed(1) + 'M'
  }
  if (n >= 1000) {
    return (n / 1000).toFixed(1) + 'K'
  }
  return n.toString()
}

/**
 * 格式化评分
 */
const formatRating = (rating: number | string): string => {
  return Number(rating).toFixed(1)
}
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

